<script setup>
defineOptions({ name: 'orderItem' })
defineProps(['data'])
</script>

<template>
  <div class="px-3 my-3" v-if="Object.keys(data).length">
    <p>
      <span class="text-secondary">订单号：</span>
      {{ data.order_no }}
    </p>
    <p>
      <span class="text-secondary">创建时间：</span>
      {{ data.pay_time }}
    </p>
    <template v-if="data.orderDetails?.data.length">
      <div
        class="bg-white d-flex align-items-center"
        v-for="item in data.orderDetails.data"
        :key="item"
        @click="$router.replace(`/detail/${item.goods.id}`)"
      >
        <img
          :src="item.goods.cover_url"
          width="100"
          height="100"
          alt=""
          class="mx-3"
        />
        <div class="w-100 pr-3">
          <h6>{{ item.goods.title }}</h6>
          <span>全场包邮</span>
          <div class="d-flex justify-content-between">
            <span class="text-danger">￥{{ item.goods.price }}</span>
            <sub>x{{ item.num }}</sub>
          </div>
        </div>
      </div>
    </template>
  </div>
  <hr />
</template>

<style lang="scss" scoped></style>
